import { createApp } from "vue";

import App from "./App.vue";
import router from "./router";
import store from "../store";
import "@vant/touch-emulator";
import directives from "./directives";

import vuetify from "./plugins/vuetify";
import { loadFonts } from "./plugins/webfontloader";

import { encryptPas } from "./utils/help";

loadFonts();
import "./styles/styles.js";
import "virtual:svg-icons-register";
import _ from "lodash";
import SvgIcon from "./components/SVG.vue";
import {
  Icon,
  Button,
  Form,
  Field,
  CellGroup,
  NavBar,
  Tabbar,
  TabbarItem,
  Swipe,
  SwipeItem,
  Dialog,
  Skeleton,
  Popup,
  Calendar,
  Overlay,
  Slider,
  PullRefresh,
  RadioGroup,
  Radio,
  Uploader,
  ImagePreview,
  Tag,
  Lazyload,
  Image,
  Cell,
  Popover,
  List,
  Collapse,
  CollapseItem,
  DatetimePicker,
  Search,
  Badge,
  Stepper,
  Switch,
  Checkbox
} from "vant";

import "./base.css";
import "./tab.scss";

const app = createApp(App).use(vuetify);
directives(app);
app.use(router);

app.use(Checkbox);
app.use(Switch);
app.use(Stepper);
app.use(Badge);
app.use(DatetimePicker);
app.use(List);
app.use(Popover);
app.use(Collapse);
app.use(CollapseItem);
app.use(Cell);
app.use(Image);
app.use(ImagePreview);
app.use(Form);
app.use(Field);
app.use(CellGroup);
app.use(Button);
app.use(NavBar);
app.use(Tabbar);
app.use(TabbarItem);
app.use(Swipe);
app.use(SwipeItem);
app.use(Icon);
app.use(Dialog);
app.use(Skeleton);
app.use(Popup);
app.use(Calendar);
app.use(Overlay);
app.use(Slider);
app.use(PullRefresh);
app.use(RadioGroup);
app.use(Radio);
app.use(Uploader);
app.use(Tag);
app.use(Lazyload);
app.use(Search);

app.use(Lazyload, {
  lazyComponent: true,
});

app.use(store);
app.component("SvgIcon", SvgIcon);

window.onload = () => {
  computedWidth();
};

window.onresize = _.debounce(() => computedWidth(), 300);
window.onEncrypt = encryptPas;

function computedWidth() {
  let deviceWidth = document.body.clientWidth;
  if (deviceWidth < 800) {
    store.dispatch("updateSystemMode", "mobile");
  } else {
    store.dispatch("updateSystemMode", "pc");
  }
}

window.reviewImg = function ($event) {
  let imgSrc = $event?.src;
  if (imgSrc) {
    ImagePreview({
      images: [imgSrc],
      closeable: true,
      showIndex: false,
    });
  }
};

window.toggleTheme = (val) => {
  if (!val) {
    let theme = localStorage.getItem("theme");
    !theme && localStorage.setItem("theme", "deepBlue");
  } else {
    localStorage.setItem("theme", val);
  }
  document.body.className = localStorage.getItem("theme");
};

window.scrollToTop = (el) => {
  const container = el;
  container.scrollTo({
    top: 0,
    behavior: "smooth", // 使用平滑的滚动行为
  });
};

router.isReady().then(() => {
  toggleTheme();
  app.mount("#app");
});
